<template>
  <div class="demo-split">
    <Split v-model="split2" mode="vertical">
      <div slot="top" class="demo-split-pane" style="margin: 20px">
        <Form ref="formInline" inline label-position="left">
          <FormItem>
            <Select v-model="selectValue" style="width:200px">
              <Option v-for="item in selectList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem>
            <!--headers="{'Content-Type': 'multipart/form-data'}"-->
            <Upload :max-size="1048576"
                    ref="upload"
                    :action="uploadUrl"
                    name="file"

                    :show-upload-list="true"
                    :on-format-error="handleFormatError"
                    :before-upload="beforeHandler"
                    :on-success="handleSuccess"
                    :on-preview="handleReturn"
                    :on-error="handleError"
                    :format="['xlsx','xls']"
                    :data="extraData">
              <Button type="info" icon="ios-cloud-upload-outline">导入</Button>
            </Upload>
          </FormItem>
        </Form>

        <!--<form enctype="multipart/form-data" method="post" action="http://localhost:8080/upload/upload">-->
          <!--http://localhost:8080/upload/upload-->
          <!--:<input type="file" name="file"/>-->
          <!--<input type="submit" value="上传"/>-->
        <!--</form>-->

        <!--<form enctype="multipart/form-data" method="post" action="http://localhost:8088/upload/upload">-->
          <!--http://localhost:8088/upload/upload-->
          <!--:<input type="file" name="file"/>-->
          <!--<input type="submit" value="上传"/>-->
        <!--</form>-->
      </div>

      <div slot="bottom" class="demo-split-pane">
        <Split v-model="split1">
          <div slot="left" class="demo-split-pane no-padding">
            <Table id="leftSame" border :columns="columns2Left1" :data="data2Left" v-if="selectValue==5" height="400" :row-class-name="changerClass">
              <div slot="header"><strong>同牌异名-导入数据</strong></div>
            </Table>
            <Table id="leftData" border :columns="columns2Left2" :data="data2DiffLeft" v-if="selectValue==5" :row-class-name="changerClass">
              <div slot="header"><strong>异牌异名-导入数据</strong></div>
            </Table>

            <Table  border :columns="columns1Left1" :data="data1Left" v-if="selectValue!=5" height="400" :row-class-name="changerClass">
              <div slot="header"><strong>同牌异名-导入数据</strong></div>
            </Table>
            <Table  border :columns="columns1Left2" :data="data1DiffLeft" v-if="selectValue!=5" :row-class-name="changerClass">
              <div slot="header"><strong>异牌异名-导入数据</strong></div>
            </Table>
          </div>

          <div slot="right" class="demo-split-pane">
            <Table id="rightSame" border :columns="columns2Right1" :data="data2Right" v-if="selectValue==5" height="400">
              <div slot="header"><strong>同牌异名-原有数据</strong></div>
            </Table>

            <Table id="rightData" border :columns="columns2Right2" :data="data2DiffRight" v-if="selectValue==5">
              <div slot="header"><strong>异牌异名-原有数据</strong></div>
            </Table>

            <Table border :columns="columns1Right1" :data="data1Right" v-if="selectValue!=5" height="400">
              <div slot="header"><strong>同牌异名-原有数据</strong></div>
            </Table>

            <Table border :columns="columns1Right2" :data="data1DiffRight" v-if="selectValue!=5">
              <div slot="header"><strong>异牌异名-原有数据</strong></div>
            </Table>
          </div>
        </Split>
      </div>
    </Split>
  </div>
</template>

<script>
  import {baseUrl} from "../../api/api";
  import {req} from "../../api/axiosFun";
  import {columns2Left1,columns2Right1} from './addInfoConst'
  import {columns2Left2,columns2Right2} from './addInfoConst'
  import {columns1Right1,columns1Right2} from "./addInfoConst";

  export default {
    name: "AddInfo",
    mounted() {
      // document.getElementById('leftSame').addEventListener('scroll', this.scrollByRight)
      // document.getElementById('rightSame').addEventListener('scroll', this.scrollByLeft)
    },
    computed: {
      data1Left() {
        return this.$store.state.addReturn1.resMap.newList
      },
      data1Right() {
        return this.$store.state.addReturn1.resMap.oldList
      },
      data1DiffLeft() {
        return this.$store.state.addReturn1.resList.newList
      },
      data1DiffRight() {
        return this.$store.state.addReturn1.resList.oldList
      },


      data2Left() {
        return this.$store.state.addReturn.resMap.newList
      },
      data2Right() {
        return this.$store.state.addReturn.resMap.oldList
      },
      data2DiffLeft() {
        return this.$store.state.addReturn.resList.newList
      },
      data2DiffRight() {
        return this.$store.state.addReturn.resList.oldList
      }
    },
    data() {
      return {
        columns2Left1: [
          {
            width: 120,
            title: '车牌号',
            key: 'carNum'
          },
          {
            width: 120,
            title: '厂牌',
            key: 'carLabel'
          },
          {
            width: 120,
            title: '车牌颜色',
            key: 'carColor'
          },
          {
            width: 120,
            title: '收费车型',
            key: 'carModel'
          },
          {
            width: 120,
            title: '申请人单位',
            key: 'applicantUnit'
          },
          {
            width: 120,
            title: '申请人姓名',
            key: 'applicantName'
          },
          {
            width: 120,
            title: '行驶本登记',
            key: 'carDriveRegist'
          },
          {
            width: 120,
            title: '固定通行站点',
            key: 'carFixedSite'
          },
          {
            width: 120,
            title: '可选通行站点',
            key: 'carChooseSite'
          },
          {
            width: 120,
            title: '业务类型',
            key: 'carBussType'
          },
          {
            width: 120,
            title: '备注',
            key: 'carNote'
          },
          {
            title: '操作',
            key: 'action',
            width: 120,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      let upUrl = '/employFreeApply/updateEmployFreeApply'
                      this.updateRow(upUrl, params.row)
                    }
                  }
                }, '确定')
              ]);
            }
          }
        ],
        columns2Left2: [
          {
            width: 120,
            title: '车牌号',
            key: 'carNum'
          },
          {
            width: 120,
            title: '厂牌',
            key: 'carLabel'
          },
          {
            width: 120,
            title: '车牌颜色',
            key: 'carColor'
          },
          {
            width: 120,
            title: '收费车型',
            key: 'carModel'
          },
          {
            width: 120,
            title: '申请人单位',
            key: 'applicantUnit'
          },
          {
            width: 120,
            title: '申请人姓名',
            key: 'applicantName'
          },
          {
            width: 120,
            title: '行驶本登记',
            key: 'carDriveRegist'
          },
          {
            width: 120,
            title: '固定通行站点',
            key: 'carFixedSite'
          },
          {
            width: 120,
            title: '可选通行站点',
            key: 'carChooseSite'
          },
          {
            width: 120,
            title: '业务类型',
            key: 'carBussType'
          },
          {
            width: 120,
            title: '备注',
            key: 'carNote'
          },
          {
            title: '操作',
            key: 'action',
            width: 120,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      let upUrl = '/employFreeApply/updateEmployFreeApply'
                      this.updateRow(upUrl, params.row)
                    }
                  }
                }, '确定')
              ]);
            }
          }
        ],
        columns1Left1: [
          {
            width: 120,
            title: '车牌号',
            key: 'carNum'
          },
          {
            width: 120,
            title: '厂牌',
            key: 'carLabel'
          },
          {
            width: 120,
            title: '车牌颜色',
            key: 'carColor'
          },
          {
            width: 120,
            title: '收费车型',
            key: 'carModel'
          },
          {
            width: 120,
            title: '申请人单位',
            key: 'applicantUnit'
          },
          {
            width: 120,
            title: '申请人姓名',
            key: 'applicantName'
          },
          {
            width: 120,
            title: '行驶本登记',
            key: 'carDriveRegist'
          },
          {
            width: 120,
            title: '固定通行站点',
            key: 'carFixedSite'
          },
          {
            width: 120,
            title: '业务类型',
            key: 'carBussType'
          },
          {
            width: 120,
            title: '备注',
            key: 'carNote'
          },
          {
            title: '操作',
            key: 'action',
            width: 120,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      let upUrl = '/productFreeApply/updateEmployFreeApply'
                      this.updateRow(upUrl, params.row)
                    }
                  }
                }, '确定')
              ]);
            }
          }
        ],
        columns1Left2: [
          {
            width: 120,
            title: '车牌号',
            key: 'carNum'
          },
          {
            width: 120,
            title: '厂牌',
            key: 'carLabel'
          },
          {
            width: 120,
            title: '车牌颜色',
            key: 'carColor'
          },
          {
            width: 120,
            title: '收费车型',
            key: 'carModel'
          },
          {
            width: 120,
            title: '申请人单位',
            key: 'applicantUnit'
          },
          {
            width: 120,
            title: '申请人姓名',
            key: 'applicantName'
          },
          {
            width: 120,
            title: '行驶本登记',
            key: 'carDriveRegist'
          },
          {
            width: 120,
            title: '固定通行站点',
            key: 'carFixedSite'
          },
          {
            width: 120,
            title: '业务类型',
            key: 'carBussType'
          },
          {
            width: 120,
            title: '备注',
            key: 'carNote'
          },
          {
            title: '操作',
            key: 'action',
            width: 120,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      let upUrl = '/productFreeApply/updateEmployFreeApply'
                      this.updateRow(upUrl, params.row)
                    }
                  }
                }, '确定')
              ]);
            }
          }
        ],
        columns2Right1: columns2Right1,
        columns2Right2: columns2Right2,
        columns1Right1: columns1Right1,
        columns1Right2: columns1Right2,
        extraData:{
          data: this.selectValue
        },
        uploadUrl: baseUrl + '/upload/upload',
        selectValue: 1,
        selectList: [
          {
            label: '路网-养护',
            value: 1
          }, {
            label: '路网-生产生活',
            value: 2
          }, {
            label: '区间-养护',
            value: 3
          }, {
            label: '区间-生产生活',
            value: 4
          }, {
            label: '区间-员工通勤',
            value: 5
          }

        ],
        split1: 0.5,
        split2: 0.4,
      }
    },
    methods: {
      updateRow(upUrl,row) {
        req('post', baseUrl + upUrl, row)
          .then(res => {
          });
      },
      changerClass(row,index,css) {

        return 'red'
      },
      scrollByRight() {
        document.getElementById('leftSame').scrollLeft=document.getElementById('rightSame').scrollLeft
      },
      beforeHandler(file) {
        this.extraData.data=this.selectValue
      },
      handleReturn(file) {
        let response = file.response

      },
      handleFormatError(file) {
        this.$Notice.warning({
          title: '文件格式不正确',
          desc: '文件 ' + file.name + ' 格式不正确，请上传.xls,.xlsx文件。'
        })
      },
      handleSuccess(res, file) {
        if (this.selectValue === 5) {
          this.$store.commit('setAddReturn',res.data.data);
        }else {
          this.$store.commit('setAddReturn1', res.data.data);
        }

        this.$Message.success("数据导入成功！")
        this.$refs.upload.clearFiles()

      },
      handleError(error, file) {
        this.$Message.error("数据导入失败！")
      },
    },
    watch:{

    }
  }
</script>

<style scoped>
  .demo-split {
    height: 40em;
    border: 1px solid #dcdee2;
    text-align: center;
    vertical-align: middle;
  }

  .demo-split-pane {
    padding: 10px;
  }


  .ivu-table red td{
    background-color: #182328;
    color: #fff;
  }
</style>
